<template>
  <div>
    <p class="topic" @click="fabu()">发布话题</p>
    <van-nav-bar
      title="话题"
      left-arrow
      @click="fabu()"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <br />
    <div class="box">
      <input class="inp" v-model="input" placeholder="分享你此刻的想法" />
      <van-uploader class="upload" :after-read="afterRead" />
    </div>
    <div class="location">
      <!-- <van-cell class="text" title="所在位置" @click="showShare()" />
      <van-icon size="20" class="location_o" name="location-o" />
      <van-icon size="20" class="arrow" name="arrow" /> -->
    </div>
    <div class="location">
      <!-- <van-cell class="text" title="谁可以看" @click="showShare()" />
      <van-icon size="20" class="location_o" name="location-o" />
      <van-icon size="20" class="arrow" name="arrow" /> -->
      <!-- <van-cell class="text" @click="showPopup">谁可以看</van-cell>
      <van-icon class="location_o" size="20" name="eye-o" />
      <van-icon size="20" class="arrow" name="arrow" />
      <span class="sp1" v-if="this.radio==='1'">公开</span>
      <span class="sp2" v-if="this.radio==='2'">仅自己可见</span> -->
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '30%' }"
        ><van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell title="公开" clickable @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="仅自己可见" clickable @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import http from '../api/index'
import util from '../util/index'

export default {
  data() {
    return {
      input: '',
      show: false,
      msg: '',
      radio: '1',
      showShare: false,
      routeFrom:''
    };
  },
  beforeRouteEnter(to, from, next) {
    // 官方解释在此无法获取组件的this，还没创建
    // 可以使用next函数的回调，可以获取创建之前的组件实例
    next(function (vm) {
      // vm就是当前组件的实例，把从哪来的路径赋值给当前组件中的变量
      vm.routeFrom = from.path;
    });},
  methods: {
    fabu(){
      http.topicFabu({
        topic:{
          topic_id:parseInt(this.$route.params.id),
        user_id:sessionStorage.getItem('username'),
        topic_text:this.input,
        topic_state:0,
        address:'洛阳',
        images:[
          {
            topic_id:this.$route.params.id,
            topic_photo_road:'kdsadj'
          }
        ]
        }
      }).then(r => {
        console.log(r);
        this.$router.push(this.routeFrom);
       util
        .getTopicByTopicId({
          topic_id: this.$route.params.id,
          pages: 1,
        })
        .then((res) => {
          console.log('话题内容', res);
          this.topicContent = res.data;
          console.log(this.topic);
          for (let i = 0; i < this.topicContent.length; i++) {
            this.topicContent[i].show = true;
          }
        });
      })
    },
    onClickLeft() {
      this.$router.push('/');
    },
    onClickRight() {},
    // 文件上传
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    // 位置
    showPopup() {
      this.show = true;
    },
  },
};
</script>
<style scoped>
.topic{
  position: absolute;
  top: 1rem;
  right: 1.3rem;
  color: blue;
  font-size: 1.6rem;
  z-index: 100;
}
body {
  background-color: gray;
}
.inp {
  width: 100%;
  border: none;
  height: 3rem;
}
.box {
  width: 100%;
  /* height: 10rem; */
  background-color: white;
}
.upload {
  margin-top: 10rem;
}
.location {
  background-color: white;
  position: relative;
}
.location_o {
  position: absolute;
  top: 1.2rem;
  left: 0.3rem;
}
.text {
  margin-left: 1rem;
  width: 95%;
}
.arrow {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
}
.van-overlay {
  display: none;
}
.sp1{
  position: relative;
  top: -3rem;
  left: 32.2rem;
}
.sp2{
  position: relative;
  top: -3rem;
  left: 28.2rem;
}
.van-cell::after{
 border-bottom: 1px solid #ebedf0;
 position: static;
}
</style>